<template>
    <div class="goodsForm page">
        <form-header :title="'添加商品'"></form-header>
        <div class="content">
            <div class="item">
                <cube-input placeholder="请输入商品名称"></cube-input>
                <form-update :title="'商品缩略图'" :imgSize="'100Kb'" :videoSize="1"></form-update>
            </div>
            <div class="item">
                <form-update :title="'商品主图'" :imgSize="'300Kb'" :videoSize="1"></form-update>
            </div>
            <div class="item">
                <form-update :title="'商品详情页'" :imgSize="'1Mb'"></form-update>
            </div>
            <div class="item">
                <form-update :title="'商品资质'" :imgSize="'200Kb'"></form-update>
            </div>
            <div class="item">
                <form-cell
                        :important="true"
                        :title="'商品模式'"
                        :headIcon="true"
                        :type="true"
                        v-model="modeValue"
                        :selected="true"
                        :list="modeList"

                ></form-cell>
                <form-cell
                        :important="true"
                        :title="'类目'"
                        :type="true"
                        :value="'请选择商品类目'"
                        :selected="true"
                        :list="typeList"
                        v-model="typeValue"
                ></form-cell>
                <form-cell
                        :title="'店铺中分类'"
                        :type="true"
                        :value="'未分类'"
                        :selected="true"
                ></form-cell>
            </div>
            <div class="item">
                <form-cell
                        :title="'型号价格'"
                        :headIcon="true"
                        :bgColor="'#F7F7F7'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :important="true"
                        :title="'型号'"
                        :typeInput="true"
                        :placeholder="'请输入商品型号'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :important="true"
                        :title="'规格'"
                        :typeInput="true"
                        :placeholder="'请输入商品规格'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :important="true"
                        :title="'库存'"
                        :typeInput="true"
                        :placeholder="'请输入商品库存'"
                        :value="''"
                ></form-cell>
                <div class="addParameter">+添加其他参数</div>
            </div>
            <div class="item">
                <form-cell
                        :title="'零售价'"
                        :typeInput="true"
                        :placeholder="'请输入零售价格'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'店铺服务津贴'"
                        :typeInput="true"
                        :placeholder="'请输入津贴费用'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'分享利润'"
                        :typeInput="true"
                        :placeholder="'请输入利润'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'赠送购物券'"
                        :typeInput="true"
                        :placeholder="'请输入券面值'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'可使用优惠券额度'"
                        :typeInput="true"
                        :placeholder="'请输入可使用面值'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'区域服务津贴'"
                        :typeInput="true"
                        :placeholder="'省(1‰);市(2‰);区(3‰);'"
                        :value="''"
                ></form-cell>
                <form-cell
                        :title="'其他促销'"
                        :typeInput="true"
                        :value="'0'"
                ></form-cell>
                <form-cell
                        :title="'店铺结算金额'"
                        :type="true"
                        :value="'0'"
                ></form-cell>
            </div>
            <div class="item">
                <form-cell
                        :title="'配送方式'"
                        :type="true"
                        :value="'快递发货'"
                        :selected="true"
                ></form-cell>
                <form-cell
                        :title="'运费设置'"
                        :type="true"
                        :value="'默认运费'"
                        :selected="true"
                        :isPicker="false"
                        @click.native="turn('/freight')"
                ></form-cell>
                <form-cell
                        :title="'可配送区域'"
                        :type="true"
                        :value="'待定'"
                        :selected="true"
                ></form-cell>
                <form-cell
                        :title="'发货地'"
                        :type="true"
                        :value="'待定'"
                        :selected="true"
                ></form-cell>
                <form-cell
                        :title="'发货时间'"
                        :type="true"
                        :value="'待定'"
                        :selected="true"
                ></form-cell>
            </div>
            <div class="item">
                <div class="btnBox" v-if="toggleBtn">
                    <div class="join">放入仓库</div>
                    <div class="sell">上架出售</div>
                </div>
                <div class="btnBox secBox" v-else>
                    <div class="join">删除</div>
                    <div class="join">上架</div>
                    <div class="sell">保存</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import formCell from '@/components/form-cell'
    import formUpdate from '@/components/form-update'
    export default {
        components:{formCell,formUpdate,formHeader},
        name : "index",
        data(){
            return{
                modeList:[{text:'代理有利',value:'代理有利'},{text:'分享有利',value:'分享有利'}],
                modeValue:'代理有利',
                typeList:[
                    {text:'农副产品',value:'农副产品'},
                    {text:'生殖',value:'生殖'},
                    {text:'养生',value:'养生'},
                    {text:'美妆',value:'美妆'},
                    {text:'体验',value:'体验'},
                    {text:'签到有礼',value:'签到有礼'},
                    {text:'秒杀',value:'秒杀'},
                    {text:'配件',value:'配件'},
                    {text:'居家',value:'居家'},
                    {text:'美食',value:'美食'},
                    {text:'拼团',value:'拼团'},
                    {text:'特权专享',value:'特权专享'},
                ],
                typeValue:'请选择商品类目',
                toggleBtn:true
            }
        },
        methods:{
            turn(path){
                this.$router.push({
                    path:path
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.goodsForm
    background-color $page-bg
    .item
        margin-top 0.27rem
        .cube-input
            border-bottom 0.02rem solid #EEEEEE
        .cube-input_active::after
            border none
    .content
        padding-top 1.17rem
        background-color  #EEEEEE
        /*padding-bottom 1.17rem*/
    .addParameter
        padding 0.40rem 0.40rem
        text-align right
        color #00a398
        font-size 0.40rem
    .btnBox
        background-color  #fff
        padding 0.13rem 0.4rem
        display flex
        justify-content space-between
        .join,.sell
            font-size 0.40rem
            color #333333
            padding 0.35rem 1.44rem
            border-radius 0.08rem
        .join
            border 0.03rem solid #e5e5e5
        .sell
            background-color #00A398
            color #fff
    .secBox
        .join,.sell
            padding 0.35rem 0.95rem
</style>